<template>
  <div>
    <div v-if="qType==1" v-loading="qLoading"  ref="draggableDiv"
    class="draggable-question" @mousedown="startDrag">
      <div class="q-title-edit" v-html="getQuestionTitleWithOrder ()"/>
      <div class="q-title-edit">
          <span :key="item.id" v-for="item in question.items" >
            <span class="q-item-prefix">{{item.prefix}}</span>
            <span v-html="item.content"></span>
          </span>
      </div>
    </div>

    <div v-else-if="qType==2" v-loading="qLoading"  ref="draggableDiv"
    class="draggable-question" @mousedown="startDrag">
      <div class="q-title-edit" v-html="getQuestionTitleWithOrder ()"/>
      <div class="q-title-edit">
          <span :key="item.id" v-for="item in question.items" class="q-item-contain">
            <span class="q-item-prefix">{{item.prefix}}</span>
            <span v-html="item.content" ></span>
          </span>
      </div>
    </div>

    <div v-else-if="qType==3" v-loading="qLoading"  ref="draggableDiv"
    class="draggable-question" @mousedown="startDrag">
      <div class="q-title-edit" v-html="getQuestionTitleWithOrder ()" style="display: inline;margin-right: 10px"/>
      <span>（</span>
      <span :key="item.id" v-for="item in question.items">
        <span v-html="item.content" class="q-title-edit"></span>
       </span>
      <span>）</span>
    </div>

    <div v-else-if="qType==4" v-loading="qLoading" ref="draggableDiv"
    class="draggable-question" @mousedown="startDrag">
      <div class="q-title-edit" v-html="getQuestionTitleWithOrder()"/>
    </div>

    <div v-else-if="qType==5" v-loading="qLoading"       ref="draggableDiv"
    class="draggable-question" @mousedown="startDrag">
      <div class="q-title-edit" v-html="getQuestionTitleWithOrder()"/>
    </div>
    <div v-else>
    </div>
  </div>

</template>

<script>
import DOMPurify from 'dompurify'

export default {
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    },
    questionIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isDragging: false, // 是否正在拖动
      offsetX: 0,
      offsetY: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      const imgElements = this.$el.querySelectorAll('.q-title-edit img') // 获取所有图片元素
      imgElements.forEach((imgElement) => {
        imgElement.addEventListener('click', this.handleImageClick)
      })
    })
  },
  methods: {

    handleImageClick (event) {
      const imgElement = event.target
      const currentWidth = imgElement.style.width || 'auto'

      const newWidth = prompt('请输入新的宽度（单位：px）', currentWidth)

      if (newWidth) {
        const numericWidth = parseInt(newWidth, 10)
        imgElement.style.width = `${numericWidth}px`
      }
    },
    getQuestionTitleWithOrder () {
      return this.questionIndex + '. ' + this.question.title
    },
    sanitizeHtml (html) {
      return DOMPurify.sanitize(html)
    },
    startDrag (event) {
      // 阻止事件的默认行为
      event.preventDefault()
      const rect = this.$refs.draggableDiv.getBoundingClientRect()
      this.offsetY = event.pageY - rect.pageY
      // 确保 div 的定位方式为 absolute
      this.$refs.draggableDiv.style.position = 'absolute'

      this.isDragging = true
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    onDrag (event) {
      if (!this.isDragging) return
      let x
      if (event.pageX > 800) {
        x = 450
      } else {
        x = -7
      }
      // 计算新位置

      const y = event.pageY - 210

      this.$refs.draggableDiv.style.zIndex = '1'
      this.$refs.draggableDiv.style.left = `${x}px`
      this.$refs.draggableDiv.style.top = `${y}px`
    },
    stopDrag () {
      // 停止拖动
      this.isDragging = false

      // 移除事件监听
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }

}
</script>

<style >
.draggable-question {
  padding: 10px;
  margin-bottom: 20px;
  cursor: grab; /* 鼠标悬停时显示抓手图标 */
  user-select: text;
}

.draggable-question:active {
  cursor: grabbing; /* 拖动时显示抓取图标 */
}

.q-title-edit {
  font-size: 14px ;
  max-width: 450px;
  font-family: "宋体", SimSun, serif !important;
  line-height: 25px; /*行间距*/
  p {
    display: inline !important;
  }
}
.q-title-edit img {
    width: 30%;
    vertical-align: middle; /* 垂直对齐方式 */
}

</style>
